<template>
  <div class="box">
    <el-form
      ref="orderForm"
      :model="orderFormData"
      :validate-on-rule-change="false"
      label-width="90px"
      @submit.native.prevent
    >
      <el-form-item
        v-for="(item, index) in paramsKeys"
        :key="index"
        :label="orderFormData.params[item].label"
        :prop="item"
      >
        <el-upload
          v-if="orderFormData.params[item].type==='img'"
          class="img-uploader"
          :action="uploadUrl"
          list-type="picture-card"
          :show-file-list="true"
          :on-success="handleImgSuccess"
          :auto-upload="true"
          :limit="1"
          :before-upload="beforeImgUpload">
          <i class="el-icon-plus img-uploader-icon"></i>
        </el-upload>
        <el-input
          v-else-if="!Array.isArray(orderFormData.params[item].options)"
          v-model="orderFormData.params[item].value"
          placeholder="请输入参数"
          @input="debounceHandler"
          @keyup.native.enter="debounceHandler"
        ></el-input>
        <el-select
          v-else-if="Array.isArray(orderFormData.params[item].options)"
          v-model="orderFormData.params[item].value"
          placeholder="请选择"
          @change="debounceHandler"
        >
          <el-option
            v-for="option in orderFormData.params[item].options"
            :key="option"
            :label="option"
            :value="option"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { debounce, cloneDeep } from 'lodash'
import { baseURL } from '@/config/baseConfig'
import util from '@/libs/util'
import { filter, denoise, morphologyOp, edgeop, featureop } from '@/views/process/dag/DagEdit/const/data'

export default {
  name: 'EditOrder',
  props: {
    formData: {
      type: Object,
      default: () => {
      }
    }
  },
  data () {
    return {
      uploadUrl: baseURL + 'api/system/file/',
      imageUrl: '',
      mapVisible: false,
      mode: '',
      orderFormData: {
        name: '',
        description: '',
        params: {}
      },
      srcList: []
    }
  },
  computed: {
    paramsKeys () {
      return Object.keys(this.orderFormData.params).filter(
        (item) => this.orderFormData.params[item].show !== false
      )
    }
  },
  watch: {
    formData: {
      handler (val) {
        // let sourForm=this.$options.data.orderFormData;
        Object.assign(this.orderFormData, val)
      },
      deep: true,
      immediate: true
    },
    // 如果img_src_type下拉框的值发生变化，就会触发这个函数
    'orderFormData.params.img_src_type.value': function (val) {
      console.log('img_src', val)
      this.orderFormData.params.img.value = val
      if (val !== '上传') {
        this.orderFormData.params.img.show = false
        this.orderFormData.params.src.show = true
        if (val === '图片源') {
          this.orderFormData.params.screen_type.show = false
          this.orderFormData.params.interval.show = false
          this.orderFormData.params.total.show = false
          this.orderFormData.params.video_src.show = false
          // 请求/datasource/pic, 并将返回的数据赋值给orderFormData.params.src.options
          this.$axios({
            url: '/datasource/picture',
            method: 'get',
            headers: {
              'Content-Type': 'application/json',
              Authorization: 'JWT ' + util.cookies.get('token')
            }
          }).then((res) => {
            this.orderFormData.params.src.options = []
            this.srcList = res.data.data.data
            for (let i = 0; i < this.srcList.length; i++) {
              this.orderFormData.params.src.options.push(this.srcList[i].name)
            }
          })
        } else if (val === '视频源') {
          this.orderFormData.params.screen_type.show = true
          this.orderFormData.params.interval.show = true
          this.orderFormData.params.total.show = true
          this.orderFormData.params.video_src.show = true
          this.orderFormData.params.src.show = false
          // 请求/datasource/pic, 并将返回的数据赋值给orderFormData.params.src.options
          this.$axios({
            url: '/datasource/camera',
            method: 'get',
            headers: {
              'Content-Type': 'application/json',
              Authorization: 'JWT ' + util.cookies.get('token')
            }
          }).then((res) => {
            this.orderFormData.params.video_src.options = []
            this.srcList = res.data.data.data
            for (let i = 0; i < this.srcList.length; i++) {
              this.orderFormData.params.video_src.options.push(this.srcList[i].name)
            }
          })
        }
      } else {
        this.orderFormData.params.img.show = true
        this.orderFormData.params.src.show = false
        this.orderFormData.params.video_src.show = false
        this.orderFormData.params.screen_type.show = false
        this.orderFormData.params.interval.show = false
        this.orderFormData.params.total.show = false
      }
    },
    'orderFormData.params.src.value': function (val) {
      this.orderFormData.params.img.value = 'http://127.0.0.1:9000/' + this.srcList.find((item) => item.name === val).src + '/' + val
    },
    'orderFormData.params.video_src.value': function (val) {
      this.orderFormData.params.img.value = this.srcList.find((item) => item.name === val).url
    },
    'orderFormData.params.blur_type.value': function (val) {
      // 将orderFormData的params中，filter[val].params中有的属性和blur_type的show设置为true，其他属性的show设置为false
      const filterParamsKeys = Object.keys(filter[val].params)
      for (const key in this.orderFormData.params) {
        this.orderFormData.params[key].show = filterParamsKeys.includes(key)
      }
      this.orderFormData.params.blur_type.show = true
    },
    'orderFormData.params.denosing_type.value': function (val) {
      console.log('denoising_type', val)
      // 将orderFormData的params中，filter[val].params中有的属性和blur_type的show设置为true，其他属性的show设置为false
      const filterParamsKeys = Object.keys(denoise[val].params)
      for (const key in this.orderFormData.params) {
        this.orderFormData.params[key].show = filterParamsKeys.includes(key)
      }
      this.orderFormData.params.denosing_type.show = true
    },
    'orderFormData.params.morphology_type.value': function (val) {
      console.log('morphology_type', val)
      // 将orderFormData的params中，filter[val].params中有的属性和blur_type的show设置为true，其他属性的show设置为false
      const filterParamsKeys = Object.keys(morphologyOp[val].params)
      for (const key in this.orderFormData.params) {
        this.orderFormData.params[key].show = filterParamsKeys.includes(key)
      }
      this.orderFormData.params.morphology_type.show = true
    },
    'orderFormData.params.edge_type.value': function (val) {
      console.log('edge_type', val)
      // 将orderFormData的params中，filter[val].params中有的属性和blur_type的show设置为true，其他属性的show设置为false
      const filterParamsKeys = Object.keys(edgeop[val].params)
      for (const key in this.orderFormData.params) {
        this.orderFormData.params[key].show = filterParamsKeys.includes(key)
      }
      this.orderFormData.params.edge_type.show = true
    },
    'orderFormData.params.feature_type.value': function (val) {
      console.log('feature_type', val)
      // 将orderFormData的params中，filter[val].params中有的属性和blur_type的show设置为true，其他属性的show设置为false
      const filterParamsKeys = Object.keys(featureop[val].params)
      for (const key in this.orderFormData.params) {
        this.orderFormData.params[key].show = filterParamsKeys.includes(key)
      }
      this.orderFormData.params.feature_type.show = true
    },
    'orderFormData.params.ai_type.value': function (val) {
      console.log('src', val)
      this.orderFormData.params.model_name.value = ''
      this.$axios({
        url: '/ai/services?status=1',
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'JWT ' + util.cookies.get('token')
        }
      }).then((res) => {
        console.log(res)
        this.orderFormData.params.model_name.options = []
        // 如果val是图像分类，将res.data.data.data中type为0的name属性push到orderFormData.params.model_name.options中
        if (val === '图像分类') {
          for (let i = 0; i < res.data.data.data.length; i++) {
            if (res.data.data.data[i].type === 0) {
              this.orderFormData.params.model_name.options.push(res.data.data.data[i].name)
            }
          }
        } else if (val === '目标检测') {
          for (let i = 0; i < res.data.data.data.length; i++) {
            if (res.data.data.data[i].type === 1) {
              this.orderFormData.params.model_name.options.push(res.data.data.data[i].name)
            }
          }
        } else if (val === '图像分割') {
          for (let i = 0; i < res.data.data.data.length; i++) {
            if (res.data.data.data[i].type === 2) {
              this.orderFormData.params.model_name.options.push(res.data.data.data[i].name)
            }
          }
        }
      })
    }
  },
  mounted() {

  },
  methods: {
    handleImgSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.orderFormData.params.img.value = res.data.url
      // console.log('res.data.url:', res.data.url);
    },
    beforeImgUpload(file) {
      console.log('file', file)
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },

    // 当关闭添加命令弹窗
    onAddOrderDialgClose() {
      const data = this.$options.data()
      this.orderFormData = data.orderFormData
      this.$emit('cancelorder')
    },
    // 添加行为
    handleAddOrder() {
      this.$refs.orderForm.validate(async (valid) => {
        if (valid) {
          this.$emit('confirmorder', cloneDeep(this.orderFormData))
        } else {
          return false
        }
      })
    },

    handlerChange() {
      // this.$emit("updateCellData", cloneDeep(this.orderFormData));
      // console.log('handlerChange', this.orderFormData)
    },
    debounceHandler: debounce(function () {
      this.handlerChange()
    }, 1000)
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  color: #2c8eff;
}

::v-deep .img-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep .img-uploader .el-upload:hover {
  border-color: #409EFF;
}

::v-deep .img-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

::v-deep .img {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
